<template>
  <div class="box">
    <mt-header title="资费套餐" class="header">
      <router-link to="/user" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="item-box">
      <div class="item">
        <div class="item-header">
          <img src="../assets/images/item1_logo.png"/>
          <span><b>时长套餐</b></span>
        </div>
        <hr class="renew-hr"/>
        <div class="item-body">
          <div class="item-section">
            <img src="../assets/images/item1.png"/>
            <div class="item-section-content">
              <div class="item-section-top">
                <p class="limit-time">限时购</p>
                <p class="description">（包月不限流量套餐）</p>
              </div>
              <div class="item-section-bottom">
                <p class="price">￥20</p>
                <div class="number-box">
                  <span>-</span>
                  <input type="text" class="number" v-model="number"/>
                  <span>+</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item-section-footer">
            <div>该套餐按照用户上网使用流量计算，不限制上网时间。</div>
          </div>
          <div class="logo-box">
            <!--<span class="no-check"></span>-->
            <img src="../assets/images/item_check.png"/>
          </div>
        </div>
        <hr class="renew-hr"/>
        <div class="item-footer">
          <span>使用范围</span>
          <span class="float-right">桔子公寓</span>
        </div>
      </div>
      <div class="item">
        <div class="item-header">
          <img src="../assets/images/item2_logo.png"/>
          <span><b>流量套餐</b></span>
        </div>
        <hr class="renew-hr"/>
        <div class="item-body">
          <div class="item-section">
            <img src="../assets/images/item2.png"/>
            <div class="item-section-content">
              <div class="item-section-top">
                <p class="limit-time">限时购</p>
                <p class="description">（包月不限流量套餐）</p>
              </div>
              <div class="item-section-bottom">
                <p class="price">￥1</p>
                <div class="number-box">
                  <span>-</span>
                  <input type="text" class="number" v-model="number"/>
                  <span>+</span>
                </div>
              </div>
            </div>

          </div>
          <div class="item-section-footer">
            <div>该套餐按照用户上网使用流量计算，不限制上网时间。</div>
          </div>
          <div class="logo-box">
            <!--<span class="no-check"></span>-->
            <img src="../assets/images/no_item_check.png" v-on:click="changeCheck"/>
          </div>
        </div>
        <hr class="renew-hr"/>
        <div class="item-footer">
          <span>使用范围</span>
          <span class="float-right">桔子公寓</span>
        </div>
      </div>
    </div>
    <footer class="settlement">
      <div class="settlement-left">
        <label>总计费用</label>
        <span class="price">￥40</span>
      </div>
      <div class="settlement-right">
        <button v-on:click="settlement">结算</button>
      </div>
    </footer>
  </div>
</template>

<script>
  export default {
    name: "package",
    mounted: function() {

    },
    data() {
      return {
        number: "1",
        isChecked: false
      }
    },
    methods: {
      settlement: function () {

      },
      changeCheck: function () {

      }
    }
  }
</script>

<style scoped>
  .box {
    font-size: 0.14rem;
    height: 100%;
    background-color: rgba(239, 239, 239, 1);
    color: rgba(16, 16, 16, 1);
    font-family: Arial;
  }

  .float-right {
    float: right;
  }

  .header {
    height: 0.5rem;
    line-height: 0.5rem;
    background-color: rgba(37, 44, 53, 1);
  }

  .item-header, .item-footer {
    line-height: 0.4rem;
    text-align: left;
    padding: 0 0.1rem;
    font-size: 0.14rem;
  }

  .item-footer {
    padding: 0 0.16rem 0 0.27rem;

  }

  .item-header img {
    width: 0.24rem;
    height: 0.24rem;

    vertical-align: middle;
    margin-right: 0.06rem;
  }

  .renew-hr {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 0;
    color: #bbbbbb;
  }

  .item-header b {
    vertical-align: middle;
  }

  .item-box {
    background-color: rgba(239, 239, 239, 1);
    padding-bottom: 0.5rem;
  }

  .item-box .item {
    margin-bottom: 0.19rem;
    background-color: #ffffff;
  }

  .item-body {
    position: relative;
    line-height: 1.5rem;
    font-size: 0.14rem;
  }

  .item-body .logo-box {
    position: absolute;
    top: 50%;
    left: 0.14rem;
    transform: translateY(-50%);
  }

  .checked {
    background: url("../assets/images/item_check.png") center;
  }

  .no-check {
    background: url("../assets/images/no_item_check.png") center;
  }

  .item-body .logo-box img {
    display: inline-block;
    width: 0.22rem;
    height: 0.22rem;
  }

  .item-section {
    height: 1.06rem;
    text-align: left;
  }

  .item-section img {
    width: 0.65rem;
    height: 0.65rem;
    margin-left: 0.46rem;
  }

  .item-section-footer {
    width: 100%;

    box-sizing: border-box;
    margin: 0.12rem 0;
    padding: 0 0.15rem 0 0.27rem;
  }

  .item-section-footer > div {
    width: 100%;
    height: 0.31rem;
    line-height: 0.31rem;
    border-radius: 4px;
    background-color: rgba(244, 248, 251, 1);
    color: rgba(117, 118, 122, 1);
    font-size: 0.12rem;
    text-align: center;
  }

  .item-section-top, .item-section-bottom {
    width: 2.28rem;
  }

  .item-section-top p, .item-section-bottom p, .item-section-bottom div {
    float: left;
  }

  .item-section-top .limit-time {
    border: 1px solid #E51C23;
    padding: 0 0.03rem;
    line-height: 0.2rem;
    height: 0.2rem;
    margin-top: 0.165rem;
    font-size: 0.12rem;
    box-sizing: border-box;
  }

  .item-section-top .description {

  }

  .price {
    color: #E51C23;
    font-size: 0.16rem;
  }

  .item-section-bottom .number-box {
    width: 0.96rem;
    height: 0.24rem;
    overflow: hidden;
    line-height: 0.24rem;
    margin-top: 0.135rem;
    margin-left: 0.46rem;
    border-radius: 3px;
    border: 1px solid #bbbbbb;
  }

  .number-box span {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 0.25rem;
    height: 0.24rem;
    text-align: center;
  }

  .number-box .number {
    margin: 0;
    padding: 0;
    width: 0.36rem;
    height: 0.24rem;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
    border: none;
    font-size: 0.14rem;
    outline: none;
  }

  .item-section-content {
    float: right;
  }

  .item-section-content > div {
    height: 0.53rem;
    line-height: 0.53rem;
  }

  .settlement {
    width: 100%;
    text-align: left;
    line-height: 0.5rem;
    position: fixed;
    background-color: #ffffff;
    bottom: 0;
  }

  .settlement .settlement-left {
    float: left;
    margin-left: 0.16rem;
  }

  .settlement .settlement-right {
    float: right;

  }

  .settlement button {
    width: 1.15rem;
    height: 0.5rem;
    box-sizing: border-box;
    border: none;
    color: #ffffff;
    background-color: rgba(252, 45, 72, 1);
    font-size: 0.16rem;
  }
</style>
